<template>
  <wx-tables
    :columns="columns"
    title="家长管理"
    :data-source="dataSource"
    :loading="loading"
    :total="total"
    :size.sync="size"
    :page.sync="page"
  >
    <template #search>
      <!--      <tip-block tip="搜索" />-->
      <el-form label-position="left" style="margin-top: 10px;">
        <div style="display: flex;">
          <el-form-item style="display: flex" label="所在学部" prop="search_code">
            <el-select v-model="searchForm.search_parent_department_id" clearable placeholder="请选择学部">
              <el-option
                v-for="item in select_dept"
                :key="item.type"
                :label="item.label"
                :value="item.type"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;margin-left: 2%;" label="所在年级" prop="search_code">
            <el-select v-model="searchForm.search_parent_grade_name" clearable placeholder="请选择年级">
              <el-option
                v-for="item of 20"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="display: flex;margin-left: 2%;" label="所在班级" prop="search_code">
            <el-select v-model="searchForm.search_parent_class_name" clearable placeholder="请选择班级">
              <el-option
                v-for="item of 20"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <div style="margin-left: 5%;">
            <el-button type="primary" class="table-btn" icon="el-icon-search" @click="handleSearchClick">筛选</el-button>
            <el-button class="table-btn" icon="el-icon-refresh" @click="handleRectSearch">重置</el-button>
          </div>
        </div>
      </el-form>
    </template>
    <!-- tools -->
    <template #tools>
      <!--      <el-button type="primary" class="table-btn" @click="handleOpenForm()">添加账号</el-button>-->
      <!--      <el-button class="table-btn" icon="el-icon-refresh-right" @click="handleGetTable">刷新</el-button>-->
    </template>
    <template v-slot:real_name="record">
      {{ record.row.real_name || record.row.phonenum }}
    </template>
    <template v-slot:oper="record">
      <div class="oper-box">
        <el-popconfirm
          :ref="`popover-${record.$index}`"
          title="确定注销当前家长吗？"
          @confirm="handleSetStatus(record.row)"
        >
          <el-link slot="reference" type="primary">{{ record.row && record.row.status === 0 ? '启用':'注销' }}</el-link>
        </el-popconfirm>
        <span><el-link type="primary" @click="handleOpenForm(record.row.id,editCon,record.row)">更改角色</el-link></span>
      </div>
    </template>
    <wx-dialog
      ref="myDialog"
      :visible.sync="formVisible"
      title="更改角色"
      width="500px"
      @ok="handleSaveFormParent"
    >
      <div>
        <el-form ref="ruleForm" :rules="ruleForm" :model="formInfo" label-position="left" label-width="75px">
          <el-form-item label="账号名称" prop="janitor_name">
            <span>{{ formInfo.phonenum }}</span>
          </el-form-item>
          <el-form-item label="更改角色" prop="janitor_name">
            <el-select v-model="formInfo.role" placeholder="请选择角色">
              <el-option
                v-for="(item,ins) of SELECT_ROLE_LIST"
                :key="ins"
                :label="item.tabel"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </wx-dialog>
  </wx-tables>
</template>

<script>
import WxDialog from '@/components/WxDialog'
import WxTables from '@/components/WxTables'
import TableMixins from '@/components/WxTables/mixins'
import { SELECT_ROLE, SELECT_ROLE_LIST } from '@/views/constants'
import { post } from '@/utils/request'
// import TipBlock from '@/components/TipBlock'
export default {
  name: 'Patriarch',
  components: {
    WxDialog,
    WxTables
  },
  mixins: [TableMixins],
  data() {
    return {
      editCon: ['phonenum', 'role', 'id'],
      SELECT_ROLE_LIST,
      select_dept: [],
      dialogImageUrl: '',
      dialogVisible: false,
      changeRole: false,
      columns: [
        { config: { type: 'index', width: 100 }, label: '序号' },
        { dataIndex: 'real_name', label: '家长姓名', slots: true },
        { dataIndex: 'phonenum', label: '联系电话' },
        { dataIndex: 'oper', label: '操作', slots: true }
      ],
      markId: 'id',
      // 查询表格API
      api: 'api/adminPortal/accountUser/getListByCon?role=parent&level=student',
      // 根据ID markId 查询
      // findApi: '/systemAdmin/getById',
      // 接口前缀 修改
      baseApi: 'api/adminPortal/accountUser/',
      ruleForm: {
      },
      SELECT_ROLE
    }
  },
  mounted() {
    this.handleGetYearDepartment()
  },
  methods: {
    handleSaveFormParent() {
      this.formInfo.school_id = 1
      post('api/adminPortal/accountUser/setRole', this.formInfo).then((res) => {
        if (res.code === 200) {
          this.formVisible = false
          this.handleGetTable()
        }
      })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
